<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello</title>
  </head>
  <body>

  <!--  <div class="content"></div>

    <div class="border"></div>-->

  <div class="container">
    <div class="header">头部信息</div>
    <div class="content">中间内容</div>
    <div class="footer">底部信息</div>
  </div>

  <!--  <script src="http://cdn.suoluomei.com/common/js2.0/axios/axios.min.js"></script>-->

  <script>


    /* var name = 'window name';

 function fn() {
   var name = 'jsliang';

   function innerFn() {
     console.log(222, this.name);
   }

   console.log(111, this);
   innerFn();
 }

 fn();*/

      /*var name = 'window name';

  var a = {
    name: 'jsliang',
    func1: function () {
      console.log(222,this.name);
    },
    func2: function () {
      console.log(111, this);
      setTimeout(() => {
        this.func1();
      }, 100);
    }
  };

  a.func1(); // 输出啥？jsliang
  //因为func2的调用者是a，所以func2的this是a
  //然后箭头函数的this绑定最近一层非箭头函数的this，在本次中绑定在了func2上
  //所以this.func1()===a.func1()
  a.func2(); // 输出啥？ jsliang*/

      /*function foo() {
    console.log(this.a);
  }

  var obj = {a: 1, foo};
  var a = 2;
  var foo2 = obj.foo;
  var obj2 = {a: 3, foo2: obj.foo};

  obj.foo(); // 输出啥？ 1
  foo2(); // 输出啥？ 2
  obj2.foo2(); // 输出啥？ 3*/

      /*function foo() {
    console.log(this);
    console.log(this.a);
  }

  function doFoo(fn) {
    console.log(this);
    fn();
    // fn.call(this)
  }

  var obj = {a: 1, foo};
  var a = 2;
  var obj2 = {a: 3, doFoo};

  obj2.doFoo(obj.foo); // 输出啥？这里面传入的不是一个新的函数，而是一个函数的地址
  // 真正的函数在window里面，看见下面输出的结果就知道了
  console.log(obj.foo===foo)//true*/

      /*let userInfo = {
    name: 'jsliang',
    age: 25,
    sex: 'male',
    // updateInfo: function(){
    //   // 模拟 XMLHttpRequest 请求延时
    //   setTimeout(function(){
    //     this.name = "zhazhaliang"
    //     this.age = 30;
    //     this.sex = 'female';
    //   }, 1000);
    // },

    // updateInfo: () => {
    //   console.log(222,this)
    //   setTimeout(function () {
    //     console.log(111,this);
    //     this.name = 'zhazhaliang';
    //     this.age = 30;
    //     this.sex = 'female';
    //   }, 1000);
    // }

    updateInfo: function () {
      // 模拟 XMLHttpRequest 请求延时
      setTimeout(() => {
        this.name = 'zhazhaliang';
        this.age = 30;
        this.sex = 'female';

      }, 1000);

    }

  };

  userInfo.updateInfo();

  setTimeout(() => {
    console.log(userInfo);
  }, 2000);*/

      /*let myObj = {
    myName: 'jsliang',
    showThis: function() {
      console.log(this.myName);
    },
  };
  let foo = myObj.showThis;
  foo();*/

      /*function Person(name, age) {
    this.name = name;
    this.age = age;
  }

  let son = new Person('lwf', 18);

  console.log(son.name)*/

      /*Promise
    .resolve('1')
    .then((res) => {
      console.log(res);
    }).finally(() => {
    console.log('finally1');
  });

  Promise
    .resolve('2')
    .then((res) => {
      console.log(res);
    })
    .finally(() => {
      console.log('finally2');
      return '这里是 finally2';
    }).then((res) => {
    console.log('finally2 后面的 then 函数', res);
  });*/

      /*async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
  }

  async function async2() {
    console.log('async2');
  }

  console.log('script start');

  setTimeout(() => {
    console.log('settimeout');
  }, 0);

  async1();

  new Promise((resolve) => {
    console.log('promise1');
    resolve();
  }).then((res) => {
    console.log('promise2');
  });

  console.log('script end');*/

      /*async function async1() {
    await async2();
    console.log('async1');
    return 'async1 success';
  }

  async function async2() {
    return new Promise((resolve, reject) => {
      console.log('async2');
      reject('error');
    });
  }

  async1().then((res) => {
    console.log('res: ', res);
  }).catch((err)=>{
    console.log('error: ', err);
  });*/

      /*const p1 = new Promise((resolve) => {
    setTimeout(() => {
      resolve('resolve3');
      console.log('timer1');
    }, 0);
    resolve('resolve1');
    resolve('resolve2');
  }).then((res) => {
    console.log(res);
    setTimeout(() => {
      console.log(p1);
    }, 1000);
  }).finally((res) => {
    console.log('finally: ', res);
  });*/

      /*const p2 = new Promise((resolve => {
    resolve('111');
  })).then((res) => {
    console.log(res);
    console.log(p2)
  }).finally(() => {
    console.log('finally');
  });

  //在Promise被.then以后内部的resolve或者rejected会被销毁
  setTimeout(() => {
    console.log(p2)
  },1000);*/

      // window.jsonpCallBack = function (res) {
      //   console.log(res, 55);
      //   alert(res)
      // };
      /*let a = [{'{"id":"410100",1,2}': '{a,b,c}'}];

      //拿到对象的key
      a.map((item) => {
        console.log(Object.keys(item));
      });*/

      /*this.myName = "lwf";

      let foo = function() {
        this.myName = "cll";
        console.log(111, this);
      };

      foo.bind(foo)();

      console.log(window.myName);
      console.log(foo.myName);*/

    // function func(data) {
    //   //实现JSONP跨域请求
    //   console.log(123, data);
    // }

    /*let a = {
      i: 1,
      toString() {
        console.log('重写toString')
        return a.i++;
      }
    };

    if (a == 1 && a == 2 && a == 3) {
      console.log('Hello World!');
    }*/

    /*console.log('开始执行');

    const delay = (time) => {
      new Promise((resolve, reject) => {
        setTimeout(()=>{
          resolve
        },time)
      }).then();

    };
    const main = async () => {
      await delay(2000);
      console.log('Hello world'); // 最早 2 秒之后才执行
    };

    main();*/

    /*const arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];

    function flatArr(arr) {
      let newArr2 = [...new Set(arr.flat(Infinity))];
      let compare = function (x, y) {
        if (x < y) {
          return -1;
        } else if (x > y) {
          return 1;
        } else {
          return 0;
        }
      };

      return newArr2.sort(compare)
    }

    flatArr(arr);*/

    /*function compareVersion(version1, version2) {
      const newVersion1 = `${version1}`.split('.').length < 3 ? `${version1}`.concat('.0') : `${version1}`;
      const newVersion2 = `${version2}`.split('.').length < 3 ? `${version2}`.concat('.0') : `${version2}`;
      //计算版本号大小,转化大小
      function toNum(a){
        const c = a.toString().split('.');
        const num_place = ["", "0", "00", "000", "0000"],
          r = num_place.reverse();
        for (let i = 0; i < c.length; i++){
          const len=c[i].length;
          c[i]=r[len]+c[i];
        }
        return c.join('');
      }

      //检测版本号是否需要更新
      function checkPlugin(a, b) {
        const numA = toNum(a);
        const numB = toNum(b);
        return numA > numB ? 1 : numA < numB ? -1 : 0;
      }
      return checkPlugin(newVersion1 ,newVersion2);
    }*/

    /*function compareVersion(version1, version2) {
      let arr1 = checkLength(version1.toString().split('.'));
      let arr2 = checkLength(version2.toString().split('.'));
      let check = 0;

      function checkLength(version) {
        if (version.length < 3) {
          version.push('0');
        }
        return version;
      }

      for (let i = 0; i < arr1.length; i++) {
        if (check === 0) {
          if (parseInt(arr1[i]) > parseInt(arr2[i])) {
            check = 1;
          } else if (parseInt(arr1[i]) < parseInt(arr2[i])) {
            check = -1;
          }
        }
      }
      return check
    }

    compareVersion('0.1', '1.1.1'); // -1
    compareVersion('13.37', '1.2 '); // 1
    compareVersion('1.1', '1.1.0'); // 0*/




    /*function testAwait(){
      return new Promise((resolve) => {
        setTimeout(function(){
          console.log("testAwait");
          resolve();
        }, 1000);
      });
    }

    async function helloAsync(){
      await testAwait();
      console.log("helloAsync");
    }
    helloAsync();*/

    /*   const users = [
         {name: 'Jennifer Lee', age: '18', sex: 'male'},
         {name: 'Karen Wilson', age: '14', sex: 'male'},
         {name: 'Helen Gonzalez', age: '27', sex: 'male'},
         {name: 'James Garcia', age: '19', sex: 'male'},
         {name: 'Daniel Robinson', age: '18', sex: 'male'},
         {name: 'Kimberly Robinson', age: '11', sex: 'male'},
         {name: 'Shirley Martin', age: '22', sex: 'female'},
         {name: 'Matthew Thompson', age: '13', sex: 'female'},
         {name: 'Ruth Rodriguez', age: '12', sex: 'female'},
         {name: 'Mark Gonzalez', age: '17', sex: 'female'}
       ];

       const filtered = users.filter(a => a.sex === 'male' && a.age >= 18).map((item) => {
         delete item.sex;
         return item;
       });
       console.log(123, filtered);*/

    /*let a = async (number)=>{
      await time(3000)
      console.log(number)
    }

    let time =(timer)=>{
      return new Promise((resolve)=>{
        setTimeout(()=>{
          console.log('执行完啦')
          resolve()
        },timer)
      })
    }

    a(100)*/

    /*let foo = () => {
      console.log(a)
      const a = 3;
    };

    foo()*/

    /*const obj = {};
    obj.a = 3;
    console.log(obj);*/



  </script>
  <!--  <script src="http://localhost:3000/text?callback=func"></script>-->

  </body>

  <style type="text/css">

    /*html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,p { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }*/

    body, div {
      margin: 0;
      padding: 0;
    }

    .header {
      width: 100vw;
      height: 100px;
    }

    .content {
      width: 100vw;
      height: calc(100vh - 200px);
    }

    .footer {
      width: 100vw;
      height: 100px;
    }


  </style>
</html>
